<template>
  <div class="guest-list">
    <div v-for="(InfoBlock,index) in datas" :key="InfoBlock.key" :class="{'active':type === InfoBlock.type}"
         class="item flex-column" @click="$emit('change',InfoBlock.type)"
    >
      <div :style="{'--bgColor':InfoBlock.color}" class="title">{{ InfoBlock.title }}</div>
      <div class="info" :title="`${InfoBlock.dai}/${InfoBlock.zong}`">
        {{ lv1 }}/{{ lv2 }}
        <span class="num">{{ InfoBlock.dai }}/{{ InfoBlock.zong }}</span>
        件
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  datas: {
    type: Array,
    default: []
  },
  type: {
    type: String,
    default: ""
  },
  lv1: {
    type: String,
    default: "待处理"
  },
  lv2: {
    type: String,
    default: "事件总数"
  },
});
defineEmits(["change"]);
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
